<template>
    <el-row :gutter="20" type="flex" justify="start">
        <el-col :span="5" class="need-after">
            <el-input maxlength="3" size="small"
                      v-model="part1" placeholder="0"
                      @change="returnTotal"></el-input>
        </el-col>
        <el-col :span="5" class="need-after">
            <el-input maxlength="3" size="small"
                      v-model="part2" placeholder="0"
                      @change="returnTotal"></el-input>
        </el-col>
        <el-col :span="5" class="need-after">
            <el-input maxlength="3" size="small"
                      v-model="part3" placeholder="0"
                      @change="returnTotal"></el-input>
        </el-col>
        <el-col :span="5">
            <el-input maxlength="3" size="small"
                      v-model="part4" placeholder="0"
                      @change="returnTotal"></el-input>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: "input-IP",
    props: [
        'ipValue'
    ],
    data() {
        return {
            part1: '',
            part2: '',
            part3: '',
            part4: ''
        }
    },
    methods: {
        returnTotal() {
            let total = this.part1 + '.' + this.part2 + '.' + this.part3 + '.' + this.part4;
            this.$emit('inputValue',total);
        }
    },
    mounted() {
        if(this.ipValue){
            let values = this.ipValue.split('.');
            this.part1 = values[0];
            this.part2 = values[1];
            this.part3 = values[2];
            this.part4 = values[3];
        }
    }
}
</script>

<style scoped>
/deep/ .el-input .el-input__inner{
    text-align: center;
    letter-spacing: 1px;
}

/deep/ .need-after .el-input:after{
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    right: -10px;
    bottom: 5px;
    border-radius: 20px;
    background-color: #606266;
}

.ip-components-span{
    font-size: 15px;
}

</style>